<template>
	<view class="page">
		<!-- <image class="banner" :src="store_info.mer_banner"></image> -->
		<view class="swiper banner">
			<swiper :autoplay="true" indicator-dots="true" :circular="circular" :interval="interval"
				:duration="duration" indicator-color="#E4E4E4" indicator-active-color="#E93323" :current="swiperCur"
				@change="swiperChange">
				<block>
					<block v-for="(item, index) in bannerImgs" :key="index">
						<swiper-item :class="{ active: index == swiperCur }">
							<image :src="item" class="slide-image" mode="aspectFill"></image>
						</swiper-item>
					</block>
				</block>
			</swiper>
			<view class="current-box">
				图片{{current}}/{{bannerImgs.length}}
			</view>
		</view>

		<view class="store-info">
			<view class="name">{{ store_info.mer_name }}</view>
			<!-- <my-rate :value="store_info.service_score"></my-rate> -->
			<view class="addr ellipsis">{{ store_info.mer_address }}</view>
			<image class="image" :src="store_info.mer_avatar"></image>
		</view>
		<view class="content">
			<view class="cate-list">
				<!-- {{category_list}} -->
				<!-- <view v-for="(item, index) in category_list" :key="index"> -->
				<view v-for="(sub, idx) in category_list" :key="idx"
					:class="{active: mer_cate_id == sub.store_category_id}" class="cate-item"
					@click="onChangeCate(sub)">{{ sub.cate_name }}
				</view>
				<!-- </view> -->

			</view>
			<view class="goods-list">
				<view class="goods-item" v-for="(item, index) in goods_list" :key="index">
					<image class="image" @click="previewImage(item.image)" :src="item.image"></image>
					<view class="info">
						<view class="name">{{ item.store_name }}</view>
						<view class="action">
							<view class="price">￥{{ item.price }}</view>
							<view class="count" v-if="item.spec_type == 0">
								<block v-if="item.cart_num>0">
									<view class="sub" @click="subCart(item)"></view>
									<view class="value">{{item.cart_num}}</view>
								</block>

								<view class="add" @click="onAdd(item)"></view>
							</view>
							<view v-else class="sku place" @click="onGg(item)">选规格</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="action-bar">
			<view class="cart" @click="onOpenCart">
				<image class="image" src="/static/2images/cart.png"></image>
				<view class="num" v-if="cart_count">{{cart_count}}</view>
			</view>
			<view class="price">
				<text class="unit">￥</text>
				{{ total }}
			</view>
			<view class="space"></view>
			<view class="submit-btn" @click="onSubmit">结算</view>
		</view>
		<view class="overlay" v-if="show_cart" @click="show_cart = false">
			<view class="cart-box">
				<view class="clear" @click.native.stop="subDel">
					<image class="icon" src="/static/2images/clear.png"></image>
					清空
				</view>
				<view class="cart-list">
					<view v-for="(item, index) in cart_list" :key="index" class="goods-item">
						<image class="image" :src="item.product.image"></image>
						<view class="info">
							<view class="name">{{item.product.store_name}}</view>
							<view class="" style="color: #FF3700;">
								{{item.productAttr.sku}}
							</view>
							<view class="action">
								<view class="price">￥{{item.productAttr.price}}</view>
								<view class="count">
									<block>
										<view class="sub" @click.native.stop="subCart(item)"></view>
										<view class="value">{{item.cart_num}}</view>
									</block>
									<view class="add" @click.native.stop="addCart(item)"></view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="overlay full" v-if="showGg">
			<view class="goods-info">
				<view class="close " @click="showGg = false">
					<image style="width: 100%;height: 100%;" src="../../../static/2images/close.png" mode=""></image>
				</view>
				<view class="goods-item">
					<image class="image " :src="ggDetail.image"></image>
					<view class="info">
						<view class="name">{{ggDetail.store_name}}</view>
						<view class="action">
							<view class="price">￥{{cartCountTotal}}</view>
							<view class="count">
								<view class="sub place" @click="onSub"></view>
								<view class="value">{{cart_count1}}</view>
								<view class="add place" @click="cart_count1++"></view>
							</view>
						</view>
					</view>
				</view>
				<view class="sku-list">
					<view class="sku-item" v-for="(item,index) in ggDetail.attr" :key="index">
						<view class="name">{{item.attr_name}}</view>
						<view class="options">
							<view class="option" @click="onCheck(index,itm,item)" :class="{active:itm.check}"
								v-for="itm in item.attr_value">{{itm.attr}}</view>
						</view>
					</view>
				</view>
				<view class="add-to-cart" @click="onAddCart">加入菜单</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		productSpuMerchant,
		storeMerchantCategoryList,
		storeMerchantDetails,
		userCartCreate
	} from "@/api/2_store";
	import {
		getProductDetail,
		postCartAdd
	} from "@/api/store";
	import {
		cartDel,
		changeCartNum,
		getCartCounts,
		getCartList
	} from "@/api/order";

	export default {
		data() {
			return {
				swiperCur: 0,
				circular: true,
				autoplay: true,
				interval: 3000,
				duration: 500,
				current: 1,

				store_info: {},
				category_list: [],
				mer_cate_id: '',
				goods_list: [],
				showGg: false,
				cart_list: [],
				cart_count: 0,
				show_cart: false,
				ggDetail: null,
				cart_count1: 1,
				selStu: null,
				checks: [],
				requireds:[],//必选id
			};
		},
		computed: {
			bannerImgs() {
				if (this.store_info.mer_banner) {
					return this.store_info.mer_banner.split(",")
				}
				return []
			},
			cartCountTotal() {

				if (this.ggDetail) {
					let checkStr = []
					this.ggDetail.attr.map(item => {
						item.attr_value.map(item1 => {
							if (item1.check) {
								checkStr.push(item1.attr)
							}
						})
					})

					return this.accMul(this.cart_count1, this.ggDetail.sku[checkStr.toString()].price)
				} else {
					return 0
				}

			},
			total() {
				console.log('=========', this.cart_list);
				return this.cart_list.reduce((a, b) => {
					return this.accAdd(a, this.accMul(b.cart_num, b.productAttr.price))
				}, 0)
			}
		},
		onLoad(options) {
			this.id = options.id
			storeMerchantDetails({
				id: this.id
			}).then(res => {
				this.store_info = res.data
			})
			storeMerchantCategoryList({
				id: this.id
			}).then(res => {
				this.category_list = res.data
				console.log('------', res.data);
				if (this.category_list.length) {
					// if (this.category_list[0]?.children.length > 0) {
					// 	this.mer_cate_id = this.category_list[0].children[0].store_category_id
					// } else {
					this.mer_cate_id = this.category_list[0].store_category_id
					// }


					this.getGoodsList()
				}
			})
			this.getInit()

		},
		methods: {
			swiperChange() {

			},
			previewImage(img) {
				uni.previewImage({
					current: 1,
					urls: [img],
					indicator: 'number',
					loop: true
				});
			},

			accMul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length;
				} catch (e) {}
				try {
					m += s2.split(".")[1].length;
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
			},
			//加法函数
			accAdd(arg1, arg2) {
				var r1, r2, m;
				try {
					r1 = arg1.toString().split(".")[1].length;
				} catch (e) {
					r1 = 0;
				}
				try {
					r2 = arg2.toString().split(".")[1].length;
				} catch (e) {
					r2 = 0;
				}
				m = Math.pow(10, Math.max(r1, r2));
				return (arg1 * m + arg2 * m) / m;
			},
			onSub() {
				if (this.cart_count1 > 1) {
					this.cart_count1--;
				}
			},
			onAddCart() {
				let checkStr = []
				this.ggDetail.attr.map(item => {
					item.attr_value.map(item1 => {
						if (item1.check) {
							checkStr.push(item1.attr)
						}
					})
				})
				this.onAdd(this.ggDetail, this.cart_count1, checkStr.toString())
			},
			onCheck(index, ite, item) {

				item.attr_value.map(item => {
					item.check = false
				})

				// this.checks[index] = this.ggDetail.sku[item.attr]
				// console.log(this.ggDetail,item);
				// this.selStu = this.ggDetail.sku[item.attr]
				ite.check = true
			},
			onGg(item) {
				this.showGg = true
				getProductDetail(item.product_id).then(res => {
					this.ggDetail = res.data

					this.checks = []
					// this.ggDetail.attr[0].attr_value[0].check = true
					// console.log(res.data.attr[0].attr_values[0]);
					this.ggDetail.attr.map(item => {
						item.attr_value[0].check = true
						this.checks.push(item.attr_value[0])
					})
					// this.checks.push()
					// this.selStu = res.data.sku[res.data.attr[0].attr_values[0]]
					console.log('---------', this.checks);
					// console.log(res.data.stu[]);
				})


			},
			getGoodsList() {
				productSpuMerchant({
					id: this.id,
					mer_cate_id: this.mer_cate_id,
					limit: 100,
				}).then(res => {
					console.log(res.data.list);
					console.log('requireds');
					this.requireds = res.data.list
					res.data.list.map(item => {
						item['cart_num'] = 0
						// item['cart_id'] = item1.cart_id
						this.cart_list.map(item1 => {
							// console.log(item1.product_id);
							if (item.product_id == item1.product_id) {
								console.log(item);
								item['cart_num'] = item1.cart_num
								item['cart_id'] = item1.cart_id
							}
						})
						
					})

					this.goods_list = res.data.list
				})
			},
			getInit() {
				getCartCounts({
					mer_id: this.id
				}).then(res => {
					this.cart_count = res.data[0].count
				})
				getCartList({
					mer_id: this.id
				}).then(res => {
					res.data.list.forEach(item => {
						if (item.mer_id == this.id) {
							this.cart_list = item.list
						}
					})
				})
			},
			onChangeCate(item) {
				this.mer_cate_id = item.store_category_id
				this.getGoodsList()
			},
			onAdd(item, cart_num = 1, type = '') {
				getProductDetail(item.product_id).then(res => {
					let product_attr_unique = ''
					if (type) {
						product_attr_unique = res.data.sku[type].unique
					} else {
						product_attr_unique = res.data.sku[""].unique
					}

					postCartAdd({
						cart_num: cart_num,
						is_new: 0,
						product_attr_unique: product_attr_unique,
						product_id: item.product_id,
						product_type: item.product_type
					}).then(res => {
						item.cart_num++
						this.$util.Tips({
							title: '添加成功',
							icon: 'none'
						});
						this.getInit()
						this.getGoodsList()
						this.selStu = null
						this.showGg = false
						this.cart_count1 = 1
					}).catch(er => {
						this.$util.Tips({
							title: er,
							icon: 'error'
						});
					})
				}).catch(er => {
					this.$util.Tips({
						title: er,
						icon: 'error'
					});
				})


			},
			subCart(goods) {
				// debugger
				if (goods.cart_num <= 1) {
					cartDel({
						cart_id: [goods.cart_id],
					}).then(res => {
						this.cart_count--
						// goods.cart_num = Number(goods.cart_num) - 1
						this.cart_list = this.cart_list.filter(function(item) {
							return item.cart_id !== goods.cart_id
						})
						this.getGoodsList()
					}).catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
					return
				}
				changeCartNum(goods.cart_id, {
					cart_num: Number(goods.cart_num) - 1
				}).then(res => {
					goods.cart_num = Number(goods.cart_num) - 1
					this.cart_count--

				}).catch(error => {
					this.$util.Tips({
						title: error
					});
				})
			},
			addCart(goods) {
				changeCartNum(goods.cart_id, {
					cart_num: goods.cart_num + 1
				}).then(res => {
					goods.cart_num = Number(goods.cart_num) + 1
					this.cart_count++

				}).catch(error => {
					this.$util.Tips({
						title: error
					});
				})
			},
			subDel() {
				let that = this
				let type_id = this.cart_list.map(i => i.cart_id)

				if (type_id.length == 0) {
					return that.$util.Tips({
						title: '请选择菜品'
					});
				} else {
					cartDel({
						cart_id: type_id,
					}).then(res => {
						this.cart_count = 0
						this.cart_list = []
						this.show_cart = false
						
						this.getGoodsList()
						
						return that.$util.Tips({
							title: res.message,
							icon: 'success'
						});
					}).catch(err => {
						return that.$util.Tips({
							title: err
						});
					});
				}
			},

			onOpenCart() {
				this.show_cart = !this.show_cart
			},
			onSubmit() {
				console.log(this.cart_list);
				console.log(this.requireds);
				/*
				// return
				let isSubmit = 0
				this.requireds.map(item=>{
					this.cart_list.map(card=>{
						if(card.product.product_id == item.product_id){
							isSubmit ++
						}
					})
				})
				if(isSubmit != this.requireds.length){
					this.$util.Tips({
						title: '有必选菜单没有选择'
					});
					return
				}
				*/
				uni.navigateTo({
					url: `/pages/2_development/store/pay?id=${this.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #fff;
	}

	.banner {
		height: 213px;
		width: 100%;
		position: relative;

		swiper {
			height: 100%;
			width: 100%;

			image,
			video {
				width: 100%;
				height: 100%;
			}

		}

		.current-box {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			background: rgba(0, 0, 0, .24);
			color: #fff;
			border-radius: 30px;
			padding: 2px 6px;
			font-size: 12px;
		}

	}

	.store-info {
		padding: 15px;
		position: relative;
		background-color: #fff;
		margin-left: 15px;
		margin-right: 15px;
		margin-top: -65px;
		border-radius: 14px;
		box-shadow: 0 3px 9px rgba(0, 0, 0, 0.16);
		padding-top: 20px;
		padding-left: 25px;
		padding-bottom: 34rpx;

		.name {
			font-weight: bold;
			font-size: 30rpx;
			color: #0b0b0b;
		}

		.stars {
			display: flex;
			margin-top: 8px;
		}

		.star {
			width: 19px;
			height: 19px;
		}

		.addr {
			font-size: 21rpx;
			// line-height: 1;
			color: #111;
			margin-top: 16px;
			width: 400rpx;
		}

		.image {
			width: 120rpx;
			height: 120rpx;
			position: absolute;
			top: 22px;
			right: 16px;
			border-radius: 5px;
		}
	}

	.content {
		flex: 1;
		display: flex;
		position: relative;
	}


	.cate-list {
		width: 86px;
		background: #f5f5f5;
	}

	.cate-item {
		height: 40px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		line-height: 1;
		color: #333;

		&.active {
			background-color: #fff;
		}
	}

	.goods-list {
		flex: 1;
		background: #fff;
		height: 100%;
		position: absolute;
		left: 86px;
		right: 0;
		top: 0;
		overflow: auto;
	}

	.goods-item {
		display: flex;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 15px;
		padding-bottom: 15px;

		.image {
			width: 109rpx;
			height: 109rpx;
			border-radius: 5px;
			margin-right: 8px;
		}

		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}

		.name {
			font-weight: bold;
			font-size: 27rpx;
			line-height: 1;
			color: #0b0b0b;
		}

		.action {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
		}

		.price {
			font-weight: bold;
			font-size: 16px;
			line-height: 1;
			color: #d82c2c;
		}

		.sku {
			width: 117rpx;
			height: 42rpx;
			line-height: 25px;
			font-size: 21rpx;
			color: #fff;
			text-align: center;
			border-radius: 13px;
			background: #0193ff;
		}

		.count {
			display: flex;
			align-items: center;
		}

		.sub,
		.add {
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background: url("/static/2images/add.png") no-repeat center;
			background-size: cover;
		}

		.sub {
			background: url("/static/2images/sub.png") no-repeat center;
			background-size: cover;
		}

		.value {
			width: 46px;
			text-align: center;
			line-height: 20px;
			font-size: 20px;
			color: #0b0b0b;
		}
	}

	.action-bar {
		// height: 50px;
		background: #fff;
		border-top: 1px solid #eee;
		display: flex;
		align-items: center;
		padding: 20rpx 15px;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

		.cart {
			width: 32px;
			height: 33px;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;

			.image {
				width: 32px;
				height: 33px;
			}

			.num {
				width: 16px;
				border-radius: 50%;
				height: 16px;
				background: #d82c2c;
				position: absolute;
				top: -8px;
				right: -8px;
				color: #fff;
				font-size: 10px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.price {
			font-weight: bold;
			font-size: 22px;
			line-height: 1;
			color: #0b0b0b;
			margin-left: 24px;

			.unit {
				font-weight: normal;
				font-size: 13px;
			}
		}

		.space {
			flex: 1;
		}

		.submit-btn {
			width: 110px;
			height: 32px;
			line-height: 32px;
			text-align: center;
			border-radius: 16px;
			background: #0193ff;
			font-weight: bold;
			font-size: 16px;
			color: #fff;
		}
	}

	.overlay {
		position: fixed;
		top: 0;
		right: 0;
		left: 0;
		bottom: 50px;
		z-index: 9;
		background: rgba(0, 0, 0, 0.65);

		&.full {
			bottom: 0;
		}
	}


	.cart-box {
		height: 288px;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;

		border-radius: 15px 15px 0 0;
		background: #fff;
		padding-top: 44px;
		display: flex;
		flex-direction: column;

		.clear {
			position: absolute;
			top: 15px;
			right: 15px;
			font-size: 13px;
			line-height: 1;
			color: #999;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 16px;
				height: 16px;
				margin-right: 4px;
			}
		}
	}

	.cart-list {
		flex: 1;
		overflow-y: auto;
	}

	.goods-info {
		min-height: 288px;
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		max-height: 500px;
		overflow: auto;
		border-radius: 15px 15px 0 0;
		background: #fff;
		padding-top: 34px;

		.close {
			position: absolute;
			top: 15px;
			right: 15px;
			width: 15px;
			height: 15px;
		}


		.sku-list {
			margin-top: 15px;
		}

		.sku-item {
			padding-left: 15px;

			.name {
				font-size: 15px;
				line-height: 1;
				color: #333;
			}

			.options {
				display: flex;
				flex-wrap: wrap;
				margin-top: 20px;
			}

			.option {
				width: 72px;
				height: 32px;
				line-height: 32px;
				text-align: center;
				border-radius: 4px;
				background: rgba(191, 191, 191, 0.2);
				font-size: 14px;
				color: #333;
				margin-right: 10px;
				margin-bottom: 10px;

				&.active {
					background: rgba(43, 165, 255, 0.2);
					border: 1px solid #2ba5ff;
					color: #2ba5ff;
				}
			}
		}

		.add-to-cart {
			height: 32px;
			line-height: 32px;
			text-align: center;
			border-radius: 16px;
			background: #0193ff;
			margin: 15px;
			font-weight: bold;
			font-size: 16px;
			color: #fff;
		}
	}
</style>
